<template>
  <view class="goods-list">
    <view class="goods-list-image">
      <image :src="item.img" mode="aspectFit" alt="" />
    </view>
    <view class="goods-list-content">
      <view class="goods-list-content-title flex-btw">
        <view class="title">
          <text class="name">{{ item.name }}</text>
          <text class="spu">{{ item.spu_name }}</text>
          <view class="yellow_tag" v-if="item.datum_activity">{{
            item.datum_activity
          }}</view>
        </view>
        <view class="price">
          ￥{{ Number(item.order_item_money).toFixed(2) }}
        </view>
      </view>
      <view class="goods-list-num"> ×{{ Number(item.order_num) }} </view>
      <template v-if="item.datum_activity == '积分'">
        <view class="row">
          <text>兑换数量：{{ Number(item.order_num) }}</text>
          <text
            >配送数量：{{
              orderInfo.order_status == 2 || orderInfo.order_status == 3
                ? Number(item.sort_num)
                : 0
            }}</text
          >
        </view>
        <view class="row">
          <text>兑换积分：{{ orderInfo.points }}</text>
          <text></text>
        </view>
      </template>
      <template v-else>
        <view class="row">
          <text
            >下单单价：￥{{ Number(item.order_price).toFixed(2) }}</text
          >
          <text
            >配送数量：{{
              orderInfo.order_status == 2 || orderInfo.order_status == 3
                ? Number(item.sort_num)
                : 0
            }}</text
          >
        </view>
        <view class="row">
          <text
            >配送单价：￥{{
              orderInfo.order_status == 2 || orderInfo.order_status == 3
                ? Number(item.sort_price).toFixed(2)
                : "0.00"
            }}</text
          >
          <text
            >配送金额：￥{{
              orderInfo.order_status == 2 || orderInfo.order_status == 3
                ? Number(item.sort_money).toFixed(2)
                : "0.00"
            }}</text
          >
        </view>
      </template>
      <view class="remark"
        >备注：<text class="note">{{ item.remark }}</text></view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "my-orderDetailList",
  props: {
    item: {
      type: Object,
      default: {},
    },
    orderInfo:{
      type: Object,
      default: {},
    }
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.goods-list {
  display: flex;
  align-items: center;
  height: 230rpx;
  margin: 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #ececec;
  &-image {
    width: 130rpx;
    height: 130rpx;
    margin-right: 30rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  &-content {
    flex: 1;
    .title {
      display: flex;
      align-items: flex-end;
      line-height: 28rpx;
      .name {
        font-size: 28rpx;
      }
      .spu {
        margin-left: 20rpx;
        font-size: 22rpx;
      }
      .yellow_tag {
        font-size: 22rpx;
        padding: 2rpx 12rpx;
        background: #ff9900;
        border-radius: 6rpx;
        color: #fff;
        margin-left: 8rpx;
      }
    }
    .price {
      font-size: 28rpx;
      color: #f55726;
    }
  }
  &-num {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 5rpx;
  }
  .row {
    margin-bottom: 5rpx;
    text {
      font-size: 22rpx;
      color: #666666;
    }
    text:first-child {
      display: inline-block;
      width: 55%;
    }
  }
  .remark {
    font-size: 22rpx;
    color: #333333;
    .note {
      color: #9a9a9a;
      white-space: normal;
      word-break: break-all;
      font-size: 22rpx;
    }
  }
}
</style>